<template>
  <section id="car-bill" class="background-light">
    <magic-header titleName="用车账单" :returnNative="$.isNative"></magic-header>
    <div class="staticIcon" v-if="!isHide" @click="showChart" id="icon"></div>
    <template v-if="!isHide">
      <div class="wrapper">
        <mu-flexbox class="flexbox-bg">
          <mu-flexbox-item class="flex-date" id="day">
            <li @click="dayDate">
              <span>日</span>
            </li>
          </mu-flexbox-item>
          <mu-flexbox-item class="flex-date" id="month">
            <li @click="monthDate" class="data-border">
              <span>月</span>
            </li>
          </mu-flexbox-item>
          <mu-flexbox-item class="flex-date" id="year">
            <li @click="yearDate">
              <span>年</span>
            </li>
          </mu-flexbox-item>
        </mu-flexbox>
        <div class="dataBg">
          <div class="date" id="date">
            <div class="arrow-left" @click="beforeDate(dtype)"></div>
            <div class="date-font" ref="dateTab">
              <mu-date-picker v-model="formatDate" @input="dateChange" @change="dateChange" :maxDate="nowDate" />
            </div>
            <div class="date-font-other" ref="tab">{{date}}</div>
            <div class="arrow-right" @click="afterDate(dtype)" id="arrow"></div>
          </div>
        </div>
        <div class="all">
          <div style="border:1px solid #dedede;background:#f7f7f7;display:inline-block;width:100%">
            <div style="float:left;padding:10px 0px 10px 50px">
              <span>总花费(元)</span>
              <span style="display:block;text-align:center;color:#f98700">{{billData.totalCost}}</span>
            </div>
            <div style="float:right;padding:10px 50px 10px 0px">
              <span>总里程(km)</span>
              <span style="display:block;text-align:center;color:#f98700">{{billData.totalMileage}}</span>
            </div>
          </div>
        </div>
      </div>
      <div id="table">
        <div style="margin-top:160px">
          <ul id="circularMenu">
            <li class="home" @click="costCategrey(3)">
              <span class="span3">养护费</span>
              <span class="span3">￥{{billData.maintenance}}</span>
            </li>
            <li class="chat" @click="costCategrey(1)">
              <span class="span1">车辆购置费</span>
              <span class="span2">￥{{billData.vehicle}}</span>
            </li>
            <li class="email" @click="costCategrey(2)">
              <span class="span1">升级改造费</span>
              <span class="span2">￥{{billData.carProduct}}</span>
            </li>
            <li class="address" @click="costCategrey(0)">
              <span class="span6">油(电)费</span>
              <span class="span7">￥{{billData.oilElectricityEvaluate}}(估)</span>
              <span class="span8">￥{{billData.oilElectricity}}</span>
            </li>
            <li class="upload" @click="costCategrey(4)">
              <span class="span3">杂费</span>
              <span class="span3">￥{{billData.incidentals}}</span>
            </li>
            <li class="center" @click="costCategrey(99)">
              <span class="span4">总花费</span>
              <span class="span5">{{billData.totalCost}}元</span>
            </li>
          </ul>
        </div>
        <div class="tabBg">
          费用明细
        </div>
        <div v-for="(detailBill, index) in detailBill.carCosts" :key="index">
          <template v-if="detailBill.dataSource==1">
            <router-link :to="{ name: 'bill_detail', query: { id: detailBill.id , index:index}}">
              <mu-list-item :title="detailBill.frontExpenseName" :afterText="detailBill.cost" :describeText="detailBill.happenDate">
                <span v-if="detailBill.verifyState==0&&detailBill.needVerify==1" slot="right" class="one">
                  {{({'0': '待审核', '1': '审核通过', '2': '审核不通过'})[detailBill.verifyState]}}
                </span>
                <span v-if="detailBill.verifyState==0&&detailBill.needVerify==0" slot="right" class="four" style="color:#fff">
                </span>
                <span v-if="detailBill.verifyState==1&&detailBill.needVerify==1" slot="right" class="two">
                  {{({'0': '待审核', '1': '审核通过', '2': '审核不通过'})[detailBill.verifyState]}}
                </span>
                <span v-if="detailBill.verifyState==1&&detailBill.needVerify==0" slot="right" class="four" style="color:#fff">
                </span>
                <span v-if="detailBill.verifyState==2&&detailBill.needVerify==1" slot="right" class="three">
                  {{({'0': '待审核', '1': '审核通过', '2': '审核不通过'})[detailBill.verifyState]}}
                </span>
                <span v-if="detailBill.verifyState==2&&detailBill.needVerify==0" slot="right" class="four" style="color:#fff">
                </span>
              </mu-list-item>
              <mu-divider/>
            </router-link>
          </template>
          <template v-else>
            <router-link :to="{ name: 'bill_detail', query: { id: detailBill.id,index :index }}">
              <mu-list-item :title="detailBill.frontExpenseName" :afterText="detailBill.cost" :describeText="detailBill.happenDate">
                <span v-if="detailBill.verifyState==0&&detailBill.needVerify==1" slot="right" class="one">
                  {{({'0': '待审核', '1': '审核通过', '2': '审核不通过'})[detailBill.verifyState]}}
                </span>
                <span v-if="detailBill.verifyState==0&&detailBill.needVerify==0" slot="right" class="four" style="color:#fff">
                </span>
                <span v-if="detailBill.verifyState==1&&detailBill.needVerify==1" slot="right" class="two">
                  {{({'0': '待审核', '1': '审核通过', '2': '审核不通过'})[detailBill.verifyState]}}
                </span>
                <span v-if="detailBill.verifyState==1&&detailBill.needVerify==0" slot="right" class="four" style="color:#fff">
                </span>
                <span v-if="detailBill.verifyState==2&&detailBill.needVerify==1" slot="right" class="three">
                  {{({'0': '待审核', '1': '审核通过', '2': '审核不通过'})[detailBill.verifyState]}}
                </span>
                <span v-if="detailBill.verifyState==2&&detailBill.needVerify==0" slot="right" class="four" style="color:#fff">
                </span>
              </mu-list-item>
              <mu-divider/>
            </router-link>
          </template>
        </div>
        <router-link :to="{ name: 'create_bill'}">
          <div class="add_icon"></div>
        </router-link>
      </div>
      <div id="abc">
        <canvas id="myChart" width="100%" height="100%"></canvas>
      </div>
    </template>
    <empty v-if="isHide" message="您尚未绑定车辆"></empty>
  </section>
</template>
<script>
import magicHeader from 'components/magicHeader'
import Chart from 'chart.js'
import billInfo from 'services/bill-info'
import billDetail from 'services/bill-detail'
import empty from "components/empty-page"
export default {
  components: {
    magicHeader,
    empty
  },
  data() {
    return {
      loaded: true,
      snackbar: false,
      isDate: false,
      date: '',
      formatDate: '',
      year: '',
      month: '',
      week: '',
      day: '',
      dtype: '1',
      beginDate: '',
      endDate: '',
      billData: [],
      detailBill: [],
      isOpen: false,
      isHide: false,
      params: {
        title: '订单详情',
        uri: '#orderDetail',
        toUri: 'ec',
      },
      scrollTop: 0, // 记录滚动条位置
      carBillScrollTop: 0,
    }
  },
  activated() {
    this.initData();
    // alert(this.scrollTop)
    
    document.querySelector("#table").scrollTop = this.scrollTop
    document.querySelector("#car-bill").scrollTop = this.carBillScrollTop
  },
  created() {
    if (this.$.carId) {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      this.nowDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
      this.formatDate = year + '-' + (month > 9 ? month : '0' + month);
      this.year = year;
      this.month = month;
      this.day = day;
      this.dtype = "1";
      this.beginDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '01' + " " + "00:00:00",
        this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '31' + " " + "23:59:59",
        this.initData()
      this.date = this.formatDate;
    } else {
      this.isHide = true;
    }
  },
  watch: {
    '$route': function (to, from) {
      if (to.name === 'car-bill') {
        this.initData()
      }
    }
  },
  mounted() {
    document.getElementById('table').style.height = window.screen.height - 80 + 'px'
  },
  methods: {
    showChart() {
      if (document.getElementById("icon").className == "staticIcon") {
        document.getElementById("myChart").style.display = "block"
        document.getElementById("table").style.display = "none"
        document.getElementById("icon").className = "listIcon"
      } else {
        document.getElementById("myChart").style.display = "none"
        document.getElementById("table").style.display = "block"
        document.getElementById("icon").className = "staticIcon"
      }
      this.initChart()
    },
    initChart() {
      var ctx = document.getElementById("myChart").getContext('2d');
      if (document.getElementById("icon").className == "listIcon") {
        document.getElementById("myChart").style.display = "block"
        document.getElementById("table").style.display = "none"
        document.getElementById("icon").className = "listIcon"
      } else {
        document.getElementById("myChart").style.display = "none"
        document.getElementById("table").style.display = "block"
        document.getElementById("icon").className = "staticIcon"
      }
      console.log(Math.round(this.billData.oilElectricity / this.billData.totalCost * 100) === 'NaN')
      var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: [(this.billData.oilElectricity == '0') ? '油电费 0' : '油电费' + (this.billData.oilElectricity / this.billData.totalCost * 100).toFixed(2) + '%',
          (this.billData.carProduct == '0') ? '升级改装费 0' : '升级改装费' + (this.billData.carProduct / this.billData.totalCost * 100).toFixed(2) + '%',
          (this.billData.vehicle == '0') ? '车辆购置费 0' : '车辆购置费' + (this.billData.vehicle / this.billData.totalCost * 100).toFixed(2) + '%',
          (this.billData.incidentals == '0') ? '杂费 0' : '杂费' + (this.billData.incidentals / this.billData.totalCost * 100).toFixed(2) + '%',
          (this.billData.maintenance == '0') ? '养护费 0' : '养护费' + (this.billData.maintenance / this.billData.totalCost * 100).toFixed(2) + '%'],
          datasets: [{
            responsive: true,
            data: [this.billData.oilElectricity, this.billData.carProduct, this.billData.vehicle, this.billData.incidentals, this.billData.maintenance],
            backgroundColor: [
              '#fa5257',
              '#fb7726',
              '#fcc530',
              '#76ba83',
              '#8bc6e8',
            ],
            highlight: [
              '#fa5257',
              '#fb7726',
              '#fcc530',
              '#76ba83',
              '#8bc6e8',
            ],
          }]
        },
      });
    },
    freshData() {
      console.log(this.beginDate + '----------------')
      billInfo.bind(this)({
        type: this.dtype,
        beginTime: this.beginDate,
        endTime: this.endDate
      }, (data) => {
        this.billData = data
        this.initChart()
      }, (error) => {
        this.$.toast(error)
        return false;
      })
      billDetail.bind(this)({
        type: this.dtype,
        beginTime: this.beginDate,
        endTime: this.endDate,
        pageable: {
          pageNumber: 1,
          pageSize: 1000
        },
      }, (data) => {
        this.detailBill = data
      }, (error) => {
        this.$.toast(error)
        return false;
      })
    },
    initData() {
      billInfo.bind(this)({
        type: this.dtype,
        beginTime: this.beginDate,
        endTime: this.endDate
      }, (data) => {
        this.billData = data
        this.initChart()
      }, (error) => {
        this.$.toast(error)
        return false;
      })
      billDetail.bind(this)({
        type: this.dtype,
        beginTime: this.beginDate,
        endTime: this.endDate,
        loading: 'false'
      }, (data) => {
        console.log(data);
        this.detailBill = data
      }, (error) => {
        this.$.toast(error)
        return false;
      })
    },
    dateChange() {
      if (this.dtype === '0') {
        this.beginDate = this.formatDate + " " + "00:00:00"
        this.endDate = this.formatDate + " " + "23:59:59"
      }
      this.date = this.formatDate;
      this.year = this.formatDate.substring(0, 4)
      this.month = this.formatDate.substring(5, 7)
      this.day = this.formatDate.substring(8, 10)
      console.log(this.beginDate);
      this.freshData()
    },
    formatDateYear(date) {
      var myyear = date.getFullYear();
      return (myyear);
    },
    formatDateDay(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();
      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return (myyear + "-" + mymonth + "-" + myweekday);
    },
    formatDateMonth(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      return (myyear + "-" + mymonth);
    },
    dayDate() {
      console.log(222);
      this.isDate = true
      document.getElementsByClassName('mu-text-field-input')[0].style.display = 'block';
      document.getElementById('day').style.borderBottom = "1px solid #f98700";
      document.getElementById('year').style.borderBottom = "none";
      document.getElementById('month').style.borderBottom = "none";
      document.getElementById('arrow').style.marginTop = '-33px';
      this.$refs.tab.style.display = "none"
      this.$refs.dateTab.style.display = "block"
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      this.date = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
      this.formatDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day)
      this.year = year;
      this.month = month;
      this.day = day;
      this.dtype = "0";
      this.beginDate = this.formatDate + " " + "00:00:00"
      this.endDate = this.formatDate + " " + "23:59:59"
      document.getElementById('myChart').remove()
      document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
      this.freshData()
    },
    yearDate() {
      this.isDate = false
      document.getElementById('year').style.borderBottom = "1px solid #f98700";
      document.getElementById('day').style.borderBottom = "none";
      document.getElementById('month').style.borderBottom = "none";
      document.getElementById('arrow').style.marginTop = '-30px';
      this.$refs.tab.style.display = "block"
      this.$refs.dateTab.style.display = "none"
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      this.date = year
      this.beginDate = year + '-' + '01' + '-' + '01' + " " + "00:00:00",
        this.endDate = year + '-' + '12' + '-' + '31' + " " + "23:59:59",
        this.year = year;
      this.month = month;
      this.day = day;
      this.dtype = "2";
      document.getElementById('myChart').remove()
      document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
      this.freshData()
    },
    monthDate() {
      this.isDate = false
      document.getElementById('month').style.borderBottom = "1px solid #f98700";
      document.getElementById('day').style.borderBottom = "none";
      document.getElementById('year').style.borderBottom = "none";
      document.getElementById('arrow').style.marginTop = '-30px';
      this.$refs.tab.style.display = "block"
      this.$refs.dateTab.style.display = "none"
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      this.date = year + '-' + (month > 9 ? month : '0' + month);
      this.beginDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '01' + " " + "00:00:00"
      if (month == "1" || month == "3" || month == "5" || month == "7" || month == "8" || month == "10" || month == "12") {
        this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '31' + " " + "23:59:59"
      } else if (month == "2" && (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
        this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '29' + " " + "23:59:59"
      } else if (month == "4" || month == "6" || month == "9" || month == "11") {
        this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '30' + " " + "23:59:59"
      } else {
        this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '28' + " " + "23:59:59"
      }
      this.year = year;
      this.month = month;
      this.dtype = "1"
      document.getElementById('myChart').remove()
      document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
      this.freshData()
    },
    beforeDate(type) {
      console.log(type);
      //月份css修改
      if (this.formatDate.length == '7') {
        document.getElementById('arrow').style.marginTop = '-30px';
      }
      var year = parseInt(this.year);
      var month = parseInt(this.month);
      var day = parseInt(this.day);
      console.log(year, month, day);
      if (type == "0") {
        if (month == "1" && day == "1") {
          year = year - 1;
        }
        if (day > 1) {
          day = day - 1
          console.log(month)
        } else {
          if (month > 1) {
            month = month - 1
            console.log(month)
          } else {
            month = 12
          }
          if (month == "1" || month == "3" || month == "5" || month == "7" || month == "8" || month == "10" || month == "12") {
            day = 31
          } else if (month == "2" && (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
            day = 29
          } else if (month == "4" || month == "6" || month == "9" || month == "11") {
            day = 30
          } else {
            day = 28
          }
        }
        console.log(month)
        this.date = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
        this.day = day;
        this.year = year;
        this.month = month;
        this.formatDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day)
        this.beginDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + " " + "00:00:00"
        this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + " " + "23:59:59"
        document.getElementById('myChart').remove();
        document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
        this.freshData()
      } else if (type == "2") {
        var year = this.year - 1;
        var month = this.month;
        var day = this.day;
        this.date = year
        this.day = day;
        this.year = year;
        this.month = month;
        this.beginDate = year + '-' + '01' + '-' + '01' + " " + "00:00:00",
          this.endDate = year + '-' + '12' + '-' + '31' + " " + "23:59:59",
          document.getElementById('myChart').remove()
        document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
        this.freshData()
      } else if (type == "1") {
        this.$refs.tab.style.display = "block"
        this.$refs.dateTab.style.display = "none"
        if (month > 1) {
          month = month - 1
          this.date = year + '-' + (month > 9 ? month : '0' + month);
          this.year = year;
          this.month = month;
        } else {
          year = year - 1
          console.log()
          month = 12
          this.date = year + '-' + (month > 9 ? month : '0' + month);
          this.year = year;
          this.month = month;
        }
        this.date = year + '-' + (month > 9 ? month : '0' + month);
        this.formatDate = year + '-' + (month > 9 ? month : '0' + month);
        this.beginDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '01' + " " + "00:00:00"
        if (month == "1" || month == "3" || month == "5" || month == "7" || month == "8" || month == "10" || month == "12") {
          this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '31' + " " + "23:59:59"
        } else if (month == "2" && (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
          this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '29' + " " + "23:59:59"
        } else if (month == "4" || month == "6" || month == "9" || month == "11") {
          this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '30' + " " + "23:59:59"
        } else {
          this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '28' + " " + "23:59:59"
        }
        this.year = year;
        this.month = month;
        document.getElementById('myChart').remove();
        document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
        this.freshData()
        console.log(this.formatDate);
      }
    },
    afterDate(type) {
      console.log(type);
      if (type == "0") {
        var nowDate = new Date();
        var year = parseInt(this.year);
        var month = parseInt(this.month);
        var day = parseInt(this.day);

        this.formatDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
        if (this.formatDateDay(nowDate) == this.formatDate) {
          this.$.toast('不能大于当前日期')
          return false;
        }
        if (month == "12" && day == "31") {
          year++;
        }
        if (month == "1" || month == "3" || month == "5" || month == "7" || month == "8" || month == "10" || month == "12") {
          if (day < 31) {
            day++
          } else {
            day = 1
            if (month < 12) {
              month++
            } else {
              month = 1
            }
          }
        } else if (month == "2" && (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
          if (day < 29) {
            day++
          } else {
            day = 1
            month++
          }
        } else if (month == "4" || month == "6" || month == "9" || month == "11") {
          if (day < 30) {
            day++
          } else {
            day = 1
            month++
          }
        } else {
          if (day < 28) {
            day++
          } else {
            day = 1
            month++
          }
        }
        this.date = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
        this.day = day;
        this.year = year;
        this.month = month;
        this.formatDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
        this.beginDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + " " + "00:00:00"
        this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + " " + "23:59:59"
        document.getElementById('myChart').remove();
        document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
        // this.freshData()
      } else if (type == "2") {
        var nowDate = new Date();
        var year = parseInt(this.year);
        this.date = parseInt(year);
        if (this.formatDateYear(nowDate) == this.date) {
          this.$.toast('不能大于当前日期')
          return false;
        }
        var year = parseInt(this.year);
        year++
        var month = parseInt(this.month);
        var day = parseInt(this.day);
        this.date = year
        this.day = day;
        this.year = year;
        this.month = month;
        this.beginDate = year + '-' + '01' + '-' + '01' + " " + "00:00:00",
          this.endDate = year + '-' + '12' + '-' + '31' + " " + "23:59:59",
          document.getElementById('myChart').remove();
        document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
        this.freshData()
      } else if (type == "1") {
        var nowDate = new Date();
        var year = parseInt(this.year);
        var month = parseInt(this.month);
        var day = parseInt(this.day);
        this.formatDate = year + '-' + (month > 9 ? month : '0' + month);
        console.log(this.formatDateDay);
        if (this.formatDateMonth(nowDate) == this.formatDate) {
          this.$.toast('不能大于当前日期')
          return false;
        }
        if (month < 12) {
          month++
        } else {
          month = 1
          year = year + 1;
        }
        console.log(month)
        if (month == "1" || month == "3" || month == "5" || month == "7" || month == "8" || month == "10" || month == "12") {
          this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '31' + " " + "23:59:59"
        } else if (month == "2" && (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
          this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '29' + " " + "23:59:59"
        } else if (month == "4" || month == "6" || month == "9" || month == "11") {
          this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '30' + " " + "23:59:59"
        } else {
          this.endDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '28' + " " + "23:59:59"
        }
        console.log(month + '---2')
        this.date = year + '-' + (month > 9 ? month : '0' + month);
        this.formatDate = year + '-' + (month > 9 ? month : '0' + month);
        this.year = year;
        this.month = month;
        this.beginDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + '01' + " " + "00:00:00"
        document.getElementById('myChart').remove();
        document.getElementById('abc').innerHTML = '<canvas id="myChart" width="100%" height="100%"></canvas>'
        // this.freshData()
        console.log(year, month, day);
      }
    },
    costCategrey(type) {
      billDetail.bind(this)({
        type: this.dtype,
        carCostType: type,
        beginTime: this.beginDate,
        endTime: this.endDate
      }, (data) => {
        this.detailBill = data
      }, (error) => {
        this.$.toast(error)
        return false;
      })
    },
    showSnackbar() {
      this.snackbar = true
      if (this.snackTimer) clearTimeout(this.snackTimer)
      this.snackTimer = setTimeout(() => {
        this.snackbar = false
      }, 2000)
    },
    hideSnackbar() {
      this.snackbar = false
      if (this.snackTimer) clearTimeout(this.snackTimer)
    },
  },
  beforeRouteLeave(to, from, next) {
    // alert('document.querySelector("#table").scrollTop' + document.querySelector("#table").scrollTop)
    // alert('document.querySelector("#car-bill").scrollTop' + document.querySelector("#car-bill").scrollTop)
    this.scrollTop = document.querySelector("#table").scrollTop;
    this.carBillScrollTop = document.querySelector("#car-bill").scrollTop;
    next()
  }
}
</script>

<style lang="scss">
@import "../../scss/common-styles.scss";
@import "../../scss/variables.scss";
#car-bill {
  .left-font {
    padding: 10px 0px 0px 10px;
    text-align: left;
  }
  #myChart {
    margin-top: 150px;
    display: none;
  }
  .wrapper {
    position: fixed;
    z-index: 10000;
    height: 142px;
    width: 100vw;
    background-color: #fff;
  }
  #table {
    overflow: auto;
  }
  .center-font {
    text-align: center;
    font-size: 2em;
  }
  .right-font {
    padding: 0px 10px 10px 0px;
    text-align: right;
  }
  .date-font {
    text-align: center;
    margin-right: 20px;
    display: none;
    .mu-date-picker {
      top: -4px;
    }
  }
  .date-font-other {
    text-align: center;
    margin-right: 20px;
    font-size: 14px;
  }
  .mu-text-field-line {
    display: none;
  }
  .mu-text-field-input {
    font-size: 14px;
    display: inline-block;
    margin-top: 2px;
    display: none;
  }
  .date {
    height: 40px;
    line-height: 40px;
    width: 190px;
    margin: 0 auto;
  }
  .data-border {
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
  }
  .arrow-left {
    width: 20;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #888888;
    float: left;
    margin: 10px 10px 0px 0px;
  }
  .arrow-right {
    width: 20;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #888888;
    float: right;
    margin-top: -30px;
  }
  .flexbox-bg {
    position: absolute;
    z-index: 100000;
  }
  .all {
    position: absolute;
    top: 72px;
    width: 100vw;
    z-index: 100000;
    padding: 10px 10px;
  }
  .flex-date {
    text-align: center;
    background-color: #ffffff;
    height: 26px;
    line-height: 26px;
    margin: 4px 0px 4px 0px !important;
  }
  .mu-date-picker {
    width: 100px;
    .mu-text-field {
      font-size: 16px;
      width: 120px;
      height: 20px;
      line-height: 20px;
      text-align: -webkit-auto;
      color: rgba(0, 0, 0, 0.54);
      margin-bottom: 8px;
      min-height: 0px;
    }
  }
  .mu-item-text,
  .mu-item-after {
    color: #000;
  }
  .mu-item-right {
    width: 140px;
    right: 0px;
  }
  .mu-item.show-right {
    padding: 1em;
  }
  .dataBg {
    position: absolute;
    top: 36px;
    background: #f0eff4;
    width: 100%;
    z-index: 100000;
  }
  .tabBg {
    background: #f7f7f7;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
  }
  .add_icon {
    background: url(../../assets/icon_add.png);
    margin: 20px;
    width: 26px;
    height: 26px;
    background-size: 2.2em;
    float: right;
    position: fixed;
    bottom: 33px;
    right: -3px;
  }
  #month {
    border-bottom: 1px solid #f98700;
  }
  .staticIcon {
    background: url(../../assets/icon_chart_car.png) no-repeat;
    background-size: 2.5em;
    width: 33px;
    height: 33px;
    position: fixed;
    right: 10px;
    top: 8px;
    z-index: 100;
  }
  .listIcon {
    background: url(../../assets/icon_list_car.png) no-repeat;
    background-size: 2.5em;
    width: 34px;
    height: 34px;
    position: fixed;
    right: 10px;
    top: 5px;
    z-index: 100;
  }
  .one {
    margin: 20px 0px 0px 68px;
    color: #f98700;
  }
  .two {
    margin: 20px 0px 0px 58px;
    color: #90c67b;
  }
  .three {
    margin: 20px 04px 0px 48px;
    color: #f85351;
  }
  .four {
    margin: 20px 38px 0px 38px;
  }
  #circularMenu {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    position: relative;
    width: 280px;
    height: 280px;
    border: dashed;
    border-radius: 50%;
    border-top-color: #929292;
    border-bottom-color: #fff;
    border-right-color: #929292;
    border-left-color: #929292;
    font-size: 12px;
  }
  #circularMenu li {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
  }
  #circularMenu li.home {
    background: url(../../assets/bill_carmaintain.png) no-repeat center center;
    background-size: 2.5em;
    top: 93px;
    left: 247px;
  }
  #circularMenu li.chat {
    background: url(../../assets/bill_shoppingcars.png) no-repeat center center;
    background-size: 2.5em;
    top: 200px;
  }
  #circularMenu li.upload {
    background: url(../../assets/bill_extras.png) no-repeat center center;
    background-size: 2.5em;
    left: 220px;
    top: 200px;
  }
  #circularMenu li.email {
    background: url(../../assets/bill_upgrade.png) no-repeat center center;
    background-size: 2.5em;
    top: 93px;
    left: -23px;
  }
  #circularMenu li.address {
    background: url(../../assets/bill_oil.png) no-repeat center center;
    background-size: 2.5em;
    top: -25px;
    left: 115px;
  }
  #circularMenu li.center {
    background: url(../../assets/icon_account_cost.png) no-repeat center center;
    height: 50px;
    width: 60px;
    left: 110px;
    top: 90px;
    background-size: 2.5em;
  }
  #circularMenu li span.span1 {
    position: relative;
    left: 50px;
    top: 10px;
    white-space: nowrap;
  }
  #circularMenu li span.span2 {
    position: relative;
    left: 50px;
    top: 10px;
    display: block;
    white-space: nowrap;
  }
  #circularMenu li span.span3 {
    position: relative;
    left: -50px;
    top: 10px;
    display: block;
    white-space: nowrap;
  }
  #circularMenu li span.span4 {
    position: relative;
    top: 50px;
    left: 10px;
    white-space: nowrap;
  }
  #circularMenu li span.span5 {
    position: relative;
    top: 50px;
    display: block;
    text-align: center;
    white-space: nowrap;
  }
  #circularMenu li span.span6 {
    position: relative;
    left: 0px;
    top: 50px;
    white-space: nowrap;
  }
  #circularMenu li span.span7 {
    position: relative;
    left: 0px;
    top: 50px;
    display: block;
    white-space: nowrap;
  }
  #circularMenu li span.span8 {
    position: relative;
    left: 0px;
    top: 50px;
    display: block;
    white-space: nowrap;
  }
}
</style>

